<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的父组件数据: {{ parentData }}</p>
    <button @click="sendDataToParent">发送数据到父组件</button>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
// 自定义的值需要在v-model:默认值才生效
const props = defineProps({
  kkx: String,
});

// defineOptions({
//   modelOptions: {
//     event: "kkx",
//   },
// });

// const emit = defineEmits(["update:modelValue"]);
const emit = defineEmits(["update:kkx"]);
const parentData = ref(props.kkx);

function sendDataToParent() {
  console.log(21);
  parentData.value = `123-${parentData.value}`;
  emit("update:kkx", parentData.value);
}
// 监听数据变化，确保实时更新父组件
// watch(parentData, (newValue) => {
//   emit("update:modelValue", newValue);
// });
</script>
